<template>
  <div class="order-container">
    <Setp />
    <testTable
      :tableSet="tableSet"
      @handleClick="handleClick"
      @handleGetSearchParams="handleGetSearchParams"
      @handleClearParams="handleClearParams"
      @handleChangePage="handleChangePage"
    />
  </div>
</template>

<script>
import Setp from "./comps/step";
import { orderTable } from "@/utils/table.js";
export default {
  components: {
    Setp
  },
  data() {
    return {
      checked: false,
      // 表格配置
      tableSet: {
        //   表格的数据
        tableData: orderTable,
        // 表格的搜索表单
        filterFrom: [
          {
            name: "nameInput", //搜索组件的名字
            params: "name", //查询传给后台的参数
            label: "姓名", //姓名
            palceholder: "请输入姓名",
            defaultVal: "hello", //默认值
            ref: "nameInput"
          },
          {
            name: "sexInput",
            params: "sex",
            label: "性别",
            palceholder: "请输入性别",
            defaultVal: "",
            ref: "sexInput"
          },
          {
            name: "typeSelect",
            params: "type", //查询传给后台的参数
            label: "类型", //姓名
            palceholder: "请输选择类型",
            defaultVal: 1, //默认值
            ref: "typeSelect"
          }
        ],
        // 表格的头部按钮
        headerBtn: [
          {
            text: "Search",
            handleName: "handleSeacrh" //事件名字
          },
          {
            text: "表头选择",
            handleName: "handleOpenDialog" //事件名字
          }
        ],
        //   表格列的配置
        clos: [
          {
            prop: "name", //属性
            label: "姓名", //显示
            align: "center", //对其方式
            width: "200", //宽度
            isShow: true
          },
          {
            prop: "sex", //属性
            label: "性别", //显示
            isShow: true
          },
          {
            prop: "phone", //属性
            label: "电话", //显示
            isShow: true,
            link: row => {
              this.$router.push({
                path: "/self/self",
                query: {
                  id: row.sex
                }
              });
            }
          },
          {
            prop: "love", //属性
            label: "爱好", //显示
            isShow: true
          },
          {
            prop: "local", //属性
            label: "地址", //显示
            isShow: true
          },
          {
            prop: "Status", //属性
            label: "状态", //显示
            isShow: true,
            html: row => {
              if (row.type == 1) {
                return `<span>启用</span>`;
              } else {
                return `<span>禁用</span>`;
              }
            }
          }
        ],
        // 表格按钮的配置
        btns: [
          {
            text: "编辑", //按钮上面的文字、
            type: "primary", //按钮的类型
            size: "mini", //按钮大小
            handleName: "handleEdit" //按钮点击的事件名字
          },
          {
            text: "删除", //按钮上面的文字、
            type: "danger", //按钮的类型
            handleName: "handleDelete" //按钮点击的事件名字
          }
        ],
        // 数据总条数
        total: 100
      },
      // 这是你的查询参数
      searchParmas: {
        name: "",
        sex: "",
        type: "",
        // 像表格这两个参数肯定有  只是你们可能不叫这个名字
        pageSize: 10, //一页多少条
        pageIndex: 1 //第几页
      }
    };
  },
  methods: {
    handleClick(row, index, name) {
      if (this[name]) {
        this[name](row, index);
      }
    },
    // 编辑
    handleEdit(row, index) {
      console.log(row, index, "编辑数据");
    },
    // 删除
    handleDelete(row, index) {
      console.log(row, index, "删除数据");
    },
    // 搜索
    handleSeacrh() {
      console.log(this.searchParmas, "查询参数");
    },
    // 获取查询参数
    handleGetSearchParams(params, v) {
      console.log(params, v);
      this.searchParmas[params] = v;
    },
    // 分页
    handleChangePage(params, v) {
      for (var key in this.searchParmas) {
        if (key == params) {
          this.searchParmas[key] = v;
        }
      }
    },
    // 清空查询参数
    handleClearParams() {
      for (var key in this.searchParmas) {
        // 如果是分页参数就不要清除了
        if (key == "pageSize" || key == "pageIndex") {
          return;
        } else {
          this.searchParmas[key] = "";
        }
      }
    },
    handleClickA(a) {
      console.log(a);
    },
    handleChangeHeader(v) {
      // v.isShow = !v.isShow
      if (v.isShow) {
        this.tableSet.clos.forEach(el => {
          if (v.label == el.label) {
            el.isShow = false;
          } 
        });
      }else{
        this.tableSet.clos.forEach(el => {
          if (v.label == el.label) {
            el.isShow = true;
          } 
        });
      }
    }
  }
};
</script>



<style lang="scss" scoped>
.order-container {
  margin-bottom: 100px;
  .checked-box {
    display: flex;
    flex-direction: row;
    .checked-box-item {
      margin: 5px;
      padding: 5px;
      display: flex;
      flex-direction: row;
      color: #409eff;
      cursor: pointer;
      overflow: hidden;
      .logo {
        width: 15px;
        height: 15px;
        display: inline-block;
        padding: 1px;
        margin-right: 4px;
        border-radius: 2.5px;
        border: 1px solid #dcdfe6;
        position: relative;
        .el-icon-check{
          color: #fff;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .isActive {
        background: #409eff;
        border: 1px solid #409eff;
      }
    }
  }
}
</style>
